<html>
<head>
	<title>淘宝网-淘！我喜欢</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="demo1.css">
	
</head>
<body>
	<div class="wrapper">
		<!-- 导航条+ad -->
		<div class="top-nav-wrap">
			<div class="top-nav">
				<ul class="top-nav-l">
					<li class="top-nav-menu china">
						<span class="c-span">中国大陆</span>
						<span class="bg-pic xsj-pic"></span>
					</li>
					<li class="top-nav-menu login-sign">
						<a href="#" class="login">亲，请登录</a>
						<a href="#" class="sign">免费注册</a>
					</li>
					<li class="top-nav-menu">
						<a href="#">手机逛淘宝</a>
					</li>
				</ul>
				<ul class="top-nav-r">
					<li class="top-nav-menu my-taobao">
						<a href="#">我的淘宝</a>
						<span class="bg-pic xsj-pic"></span>
					</li>
					<li class="top-nav-menu shop-car">
						<a href="#">
							<span class="bg-pic shopCar-pic"></span>
							<span>购物车</span>
						</a>
						<span class="bg-pic xsj-pic"></span>
					</li>
					<li class="top-nav-menu like">
						<a href="#">
							<span class="bg-pic like-pic"></span>
							<span>收藏夹</span>
						</a>
						<span class="bg-pic xsj-pic"></span>
					</li>
					<li class="top-nav-menu goods">
						<a href="#">商品分类</a>
					</li>
					<li class="top-nav-menu cut-off">
						<span>|</span>
					</li>
					<li class="top-nav-menu seller">
						<a href="#">卖家中心</a>
						<span class="bg-pic xsj-pic"></span>
					</li>
					<li class="top-nav-menu customer">
						<a href="#">联系客服</a>
						<span class="bg-pic xsj-pic"></span>
					</li>
					<li class="top-nav-menu web-nav">
						<a href="#">
							<span class="bg-pic web-nav-pic"></span>
							<span>网站导航</span>
						</a>
						<span class="bg-pic xsj-pic"></span>
					</li>
				</ul>
			</div>
			<div class="ad-wrap">
				<div class="ad">
					<img src="">
				</div>	
			</div>
		</div>
		<!-- 搜索区域 -->
		<div class="search-wrap">
			<div class="search-con">
				<div class="logo-box"></div>
				<div class="search-box">
					<div class="search-t">
						<div class="search-tab">
							<ul>
								<li class="select">宝贝</li>
								<li>天猫</li>
								<li>店铺</li>
							</ul>
						</div>
						<div class="search-panel">
							<a href="#" class="sousuo"></a>
							<form action="">
								<div class="btn">
									<button class="submit">搜索</button>
								</div>
								<div class="search-inp-box">
									<div class="search-inp">
										<!-- placeholder为灰色字体 -->
										<input type="text" name="" placeholder="荣耀10降价">
									</div>
								</div>
							</form>
							<a href="#" class="camera"></a>
						</div>
					</div>
					<div class="search-bl">
						<a href="#" class="active">新款连衣裙</a>
						<a href="#">四件套</a>
						<a href="#">潮流T恤</a>
						<a href="#">时尚女鞋</a>
						<a href="#" class="active">短裤</a>
						<a href="#">半身裙</a>
						<a href="#">男士外套</a>
						<a href="#">墙纸</a>
					</div>
				</div>
				<div class="code-box">
					<a href="#" class="phone">手机淘宝</a>
					<a href="#" class="code"></a>
					<a href="#" class="close">X</a>
				</div>
			</div>
		</div>
		<!-- 导航条 -->
		<div class="screen-nav">
			<div class="screen-nav-con">
				<h2>主题市场</h2>
				<ul class="nav-hd ">
        
            
                    <li style="color: #FF0036"><a href="https://www.tmall.com?spm=a21bo.jianhua.201859.1.5af911d9IzwdkN" data-spm-anchor-id="a21bo.jianhua.201859.1">
                            天猫
                        </a>
                    </li>
                    
                    <li class="pipe">|</li>
                    <li style="color: #FF0036"><a href="https://ju.taobao.com" data-spm-anchor-id="a21bo.jianhua.201859.2">
                            聚划算
                        </a>
                    </li>
                    
                    <li class="pipe">|</li>
                    <li style="color: #33c900"><a href="https://chaoshi.tmall.com" data-spm-anchor-id="a21bo.jianhua.201859.3">
                            天猫超市
                        </a>
                    </li>
                    <li class="pipe">|</li>
                    <li style=""><a href="https://sf.taobao.com?spm=a21bo.jianhua.201859.4.5af911d9x2AeHb" data-spm-anchor-id="a21bo.jianhua.201859.4">
                        司法拍卖
                    </a>
                    </li>
                    <li class="pipe">|</li>
                    
                    </ul>
					<ul class="nav-bd last">
                        <li style=""><a href="https://www.fliggy.com" data-spm-anchor-id="a21bo.jianhua.201859.5">
                            飞猪旅行
                        </a>
                    </li>
                    <li class="pipe">|</li>
                    <li style=""><a href="https://pages.tmall.com/wow/a/act/tiantian/dailygroup/2391/wupr?wh_pid=daily-231043" data-spm-anchor-id="a21bo.jianhua.201859.6">
                        天天特卖
                    </a>
                    </li>
                        <li class="pipe">|</li>
                        
                            
                            <li style=""><a href="https://www.jiyoujia.com/" data-spm-anchor-id="a21bo.jianhua.201859.7">
                                    极有家
                                </a>
                            </li>
                            
                            <li class="pipe">|</li>
                            <li style=""><a href="https://taolive.taobao.com/explore/index.html?isEntertainment=true" data-spm-anchor-id="a21bo.jianhua.201859.8">
                                淘宝直播
                            </a>
                        </li>
				</ul>
			</div>
		</div>
		<!-- 图片主体展示部分 -->
		<div class="screen-box">
			<div class="main">
				<div class="main-inner">
					<div class="inner-left">
						<ul>
							<li>
								<a href="#">女装</a> /
								<a href="#">内衣</a> /
								<a href="#">奢品</a>
								<span></span>
							</li>
							<li>
								<a href="#">女鞋</a> /
								<a href="#">男鞋</a> /
								<a href="#">箱包</a>
								<span></span>
							</li>
							<li>
								<a href="#">美妆</a> /
								<a href="#">饰品</a> /
								<a href="#">洗护</a>
								<span></span>
							</li>
							<li>
								<a href="#">男装</a> /
								<a href="#">运动</a> /
								<a href="#">百货</a>
								<span></span>
							</li>
							<li>
								<a href="#">手机</a> /
								<a href="#">数码</a> /
								<a href="#">企业礼品</a>
								<span></span>
							</li>
							<li>
								<a href="#">家装</a> /
								<a href="#">电器</a> /
								<a href="#">车品</a>
								<span></span>
							</li>
							<li>
								<a href="#">食品</a> /
								<a href="#">生鲜</a> /
								<a href="#">母婴</a>
								<span></span>
							</li>
							<li>
								<a href="#">医药</a> /
								<a href="#">保健</a> /
								<a href="#">进口</a>
								<span></span>
							</li>
						</ul>
					</div>
					<div class="inner-content">
						<div class="pic-box">
							<img src="./img/pic2.png" alt="">
						</div>
						<div class="inner-mall">
							<div class="head">
								<img src="./img/tm.png" alt="">
								<span class="tm">理想生活上天猫
								</span>
								<a href="#">
									<img src="./img/pic3.png" alt="">
								</a>
							</div>
						</div>
					</div>
					<div class="inner-right">
						<a href="#">
							<img src="./img/pic1.png" alt="">
						</a>
						<div class="hot">
							<span>今日热卖</span>
							<a href="#">
								<img src="./img/pic4.png" alt="">
							</a>
						</div>
					</div>
				</div>
				<div class="main-bottom">
					<div class="content">
						<div class="logo-box"></div>
						<a href="#">
							<h4>万圣节去哪玩？良阅二次元游园会等你来！</h4>
							<p>哈喽，大家好，我是你们的微漫酱！在此推荐给大家一个好玩的二次元线下活动，一起来了解一下把！</p>
						</a>
					</div>
				</div>
			</div>
			<div class="col-right">
				<div class="member">
					<div class="member-head">
						<div class="head">
							<a href="#"></a>
						</div>
						<span class="info">hi!您好</span>
						<p>
							<a href="#" class="icon">
								<span></span>
								领淘金币抵钱
							</a>
							<a href="#" class="club">
								<span></span>
								会员俱乐部
							</a>
						</p>
					</div>
					<div class="member-foot">
						<a href="#" class="login">登录</a>
						<a href="#">注册</a>
						<a href="#">开店</a>
					</div>
				</div>
				<div class="message">
					<a href="#">网上有害信息举报
						<span></span>
					</a>
				</div>
				<div class="notice">
					<div class="title">
						<ul>
							<li><a href="#">公告</a></li>
							<li><a href="#">公告</a></li>
							<li><a href="#" class="active">论坛</a></li>
							<li><a href="#">公告</a></li>
							<li><a href="#">公告</a></li>
						</ul>
					</div>
					<div class="content">
						<ul>
							<li><a href="#" class="active">新增淘宝网抽检标准</a></li>
							<li><a href="#">新增淘宝网抽检标准</a></li>
							<li><a href="#">新增淘宝网抽检标准</a></li>
							<li><a href="#">新增淘宝网抽检标准</a></li>
						</ul>
					</div>
				</div>
				<div class="module">
					<ul>
						<li>
							<a href="#">
								<span class="icon1"></span>
								<p>爱你</p>
							</a>
						</li>
						<li>
							<a href="#">
								<span class="icon2"></span>
								<p>爱你</p>
							</a>
						</li>
						<li>
							<a href="#">
								<span class="icon3"></span>
								<p>爱你</p>
							</a>
						</li>
						<li>
							<a href="#">
								<span class="icon4"></span>
								<p>爱你</p>
							</a>
						</li>
						<li>
							<a href="#">
								<span class="icon5"></span>
								<p>爱你</p>
							</a>
						</li>
						<li>
							<a href="#">
								<span class="icon6"></span>
								<p>爱你</p>
							</a>
						</li>
						<li>
							<a href="#">
								<span class="icon7"></span>
								<p>爱你</p>
							</a>
						</li>
						<li>
							<a href="#">
								<span class="icon8"></span>
								<p>爱你</p>
							</a>
						</li>
						<li>
							<a href="#">
								<span class="icon9"></span>
								<p>爱你</p>
							</a>
						</li>
						<li>
							<a href="#">
								<span class="icon10"></span>
								<p>爱你</p>
							</a>
						</li>
						<li>
							<a href="#">
								<span class="icon11"></span>
								<p>爱你</p>
							</a>
						</li>
						<li>
							<a href="#">
								<span class="icon12"></span>
								<p>爱你</p>
							</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</body>
</html>